<template>
  <view class="left_boottom_wrap">
    <seamless-scroll
      :list="state.list"
      v-model="state.scroll"
      :singleHeight="state.defaultOption.singleHeight"
      :step="state.defaultOption.step"
      :limitScrollNum="state.defaultOption.limitScrollNum"
      :hover="state.defaultOption.hover"
      :singleWaitTime="state.defaultOption.singleWaitTime"
    >
      <view class="left_boottom">
        <view class="left_boottom_item" v-for="(item, i) in state.list" :key="i">
          <text class="orderNum">{{ i + 1 }}</text>
          <view class="inner_right">
            <view class="dibu"></view>
            <view class="flex">
              <view class="info">
                <text class="labels">设备ID：</text>
                <text class="text-content zhuyao wangguan">{{ item.gatewayno }}</text>
              </view>
              <view class="info">
                <text class="labels">时间：</text>
                <text class="text-content time-text">{{ item.createTime }}</text>
              </view>
            </view>

            <text
              class="types"
              :class="{
                typeRed: item.onlineState == 0,
                typeGreen: item.onlineState == 1
              }"
            >
              {{ item.onlineState == 1 ? '上线' : '下线' }}
            </text>

            <view class="info addresswrap">
              <text class="labels">地址：</text>
              <text class="text-content ciyao address-text">{{ addressHandle(item) }}</text>
            </view>
          </view>
        </view>
      </view>
    </seamless-scroll>
  </view>
</template>

<script setup>
import { reactive, onMounted } from 'vue'
import { storeToRefs } from 'pinia'
import { useSettingStore } from '@/stores/index'
import SeamlessScroll from '@/components/seamless-scroll/seamless-scroll.vue'

const settingStore = useSettingStore()
const { defaultOption, indexConfig } = storeToRefs(settingStore)

const state = reactive({
  list: [],
  defaultOption: {
    ...defaultOption.value,
    singleHeight: 110,
    limitScrollNum: 3
  },
  scroll: true
})

const getData = () => {
  // 使用固定模拟数据
  state.list = [
    { provinceName: '广东省', cityName: '深圳市', countyName: '南山区', createTime: '2024-03-15 10:23:45', deviceId: '6c512d754bbcd6d7cd86abce0e0cac58', gatewayno: 10000, onlineState: 1 },
    { provinceName: '浙江省', cityName: '杭州市', countyName: '西湖区', createTime: '2024-03-15 10:24:12', deviceId: '6c512d754bbcd6d7cd86abce0e0cac58', gatewayno: 10001, onlineState: 0 },
    { provinceName: '江苏省', cityName: '南京市', countyName: '玄武区', createTime: '2024-03-15 10:25:30', deviceId: '6c512d754bbcd6d7cd86abce0e0cac58', gatewayno: 10002, onlineState: 1 },
    { provinceName: '上海市', cityName: '浦东新区', countyName: '', createTime: '2024-03-15 10:26:45', deviceId: '6c512d754bbcd6d7cd86abce0e0cac58', gatewayno: 10003, onlineState: 1 },
    { provinceName: '北京市', cityName: '海淀区', countyName: '', createTime: '2024-03-15 10:27:18', deviceId: '6c512d754bbcd6d7cd86abce0e0cac58', gatewayno: 10004, onlineState: 0 },
    { provinceName: '四川省', cityName: '成都市', countyName: '锦江区', createTime: '2024-03-15 10:28:52', deviceId: '6c512d754bbcd6d7cd86abce0e0cac58', gatewayno: 10005, onlineState: 1 },
    { provinceName: '湖北省', cityName: '武汉市', countyName: '武昌区', createTime: '2024-03-15 10:29:33', deviceId: '6c512d754bbcd6d7cd86abce0e0cac58', gatewayno: 10006, onlineState: 1 },
    { provinceName: '福建省', cityName: '厦门市', countyName: '思明区', createTime: '2024-03-15 10:30:15', deviceId: '6c512d754bbcd6d7cd86abce0e0cac58', gatewayno: 10007, onlineState: 0 },
    { provinceName: '山东省', cityName: '青岛市', countyName: '市南区', createTime: '2024-03-15 10:31:42', deviceId: '6c512d754bbcd6d7cd86abce0e0cac58', gatewayno: 10008, onlineState: 1 },
    { provinceName: '河南省', cityName: '郑州市', countyName: '金水区', createTime: '2024-03-15 10:32:28', deviceId: '6c512d754bbcd6d7cd86abce0e0cac58', gatewayno: 10009, onlineState: 1 },
    { provinceName: '湖南省', cityName: '长沙市', countyName: '岳麓区', createTime: '2024-03-15 10:33:55', deviceId: '6c512d754bbcd6d7cd86abce0e0cac58', gatewayno: 10010, onlineState: 0 },
    { provinceName: '安徽省', cityName: '合肥市', countyName: '蜀山区', createTime: '2024-03-15 10:34:20', deviceId: '6c512d754bbcd6d7cd86abce0e0cac58', gatewayno: 10011, onlineState: 1 },
    { provinceName: '江西省', cityName: '南昌市', countyName: '东湖区', createTime: '2024-03-15 10:35:47', deviceId: '6c512d754bbcd6d7cd86abce0e0cac58', gatewayno: 10012, onlineState: 1 },
    { provinceName: '重庆市', cityName: '渝北区', countyName: '', createTime: '2024-03-15 10:36:12', deviceId: '6c512d754bbcd6d7cd86abce0e0cac58', gatewayno: 10013, onlineState: 0 },
    { provinceName: '陕西省', cityName: '西安市', countyName: '雁塔区', createTime: '2024-03-15 10:37:38', deviceId: '6c512d754bbcd6d7cd86abce0e0cac58', gatewayno: 10014, onlineState: 1 },
    { provinceName: '辽宁省', cityName: '沈阳市', countyName: '和平区', createTime: '2024-03-15 10:38:25', deviceId: '6c512d754bbcd6d7cd86abce0e0cac58', gatewayno: 10015, onlineState: 1 },
    { provinceName: '云南省', cityName: '昆明市', countyName: '五华区', createTime: '2024-03-15 10:39:50', deviceId: '6c512d754bbcd6d7cd86abce0e0cac58', gatewayno: 10016, onlineState: 0 },
    { provinceName: '贵州省', cityName: '贵阳市', countyName: '云岩区', createTime: '2024-03-15 10:40:18', deviceId: '6c512d754bbcd6d7cd86abce0e0cac58', gatewayno: 10017, onlineState: 1 },
    { provinceName: '黑龙江省', cityName: '哈尔滨市', countyName: '南岗区', createTime: '2024-03-15 10:41:45', deviceId: '6c512d754bbcd6d7cd86abce0e0cac58', gatewayno: 10018, onlineState: 1 },
    { provinceName: '吉林省', cityName: '长春市', countyName: '朝阳区', createTime: '2024-03-15 10:42:32', deviceId: '6c512d754bbcd6d7cd86abce0e0cac58', gatewayno: 10019, onlineState: 1 }
  ]
}

const addressHandle = (item) => {
  let name = item.provinceName
  if (item.cityName) {
    name += '/' + item.cityName
    if (item.countyName) {
      name += '/' + item.countyName
    }
  }
  return name
}

onMounted(() => {
  getData()
})
</script>

<style scoped lang="scss">
.left_boottom_wrap {
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.left_boottom {
  width: 100%;
  height: 100%;

  .left_boottom_item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 8px;
    font-size: 14px;
    margin: 10px 0;

    .orderNum {
      margin: 0 16px 0 -20px;
      color: #31abe3;
      font-weight: bold;
      font-size: 16px;
    }

    .info {
      margin-right: 10px;
      display: flex;
      align-items: center;
      color: #fff;

      .labels {
        flex-shrink: 0;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.6);
      }

      .zhuyao {
        color: #1890ff;
        font-size: 15px;
        font-weight: 900;
      }

      .ciyao {
        color: rgba(255, 255, 255, 0.8);
      }

      .time-text {
        font-size: 12px;
        color: #fff;
      }

      .address-text {
        font-size: 12px;
      }
    }

    .inner_right {
      position: relative;
      height: 100%;
      width: 380px;
      flex-shrink: 0;
      line-height: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;

      .dibu {
        position: absolute;
        height: 2px;
        width: 104%;
        background-image: url('/static/img/zuo_xuxian.png');
        bottom: -10px;
        left: -2%;
        background-size: cover;
      }

      .addresswrap {
        width: 100%;
        display: flex;
        margin-top: 8px;
      }
    }

    .wangguan {
      width: 80px;
      flex-shrink: 0;
    }

    .types {
      width: 30px;
      flex-shrink: 0;
      font-size: 14px;
    }

    .typeRed {
      color: #fc1a1a;
    }

    .typeGreen {
      color: #29fc29;
    }
  }
}
</style>

